<template>
  <div class="page-car-owner">
    <div class="main-wrapper">
      <div class="main-info">
        <div class="col-car-owner">
          <div class="com-panel-car-owner">
            <h2>成为车主保障</h2>
            <div class="sections">
              <div class="section s1">
                <h3>提供全方位保障</h3>
                <p>保障包含车损险及盗抢险150万，第三者责任险100万和座位险5万，<br>租客保险均独立购买，不影响车辆原有商业险</p>
              </div>
              <div class="section s2">
                <h3>严格的认证制度</h3>
                <p>在交易前累计扣分不超过11分，车主对租客具有完备的评价体系，<br>且时时更新。</p>
              </div>
              <div class="section s3">
                <h3>全方位定位系统，租车全程尽在掌控</h3>
                <p>为所有车辆安装凹凸租车智能车联网全方位终端，精准定位车辆，<br>随时掌控车辆信息，行程全掌握，爱车共享无忧。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-car-owner-form-info">
          <div class="com-panel-car-owner-form">
            <h2>注册成为车主</h2>
            <div class="form is-open">
              <div class="row">
                <div class="at-select">
                  <div class="at-select__value"><span>车辆所在地</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
                <div class="at-select at-select--is-multi">
                  <div class="at-select__value"><span>车辆归属地</span></div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
              </div>
              <div class="row">
                <div class="at-select">
                  <div class="at-select__value"><span>请选择品牌</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
                <div class="at-select">
                  <div class="at-select__value"><span>请选择车型</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
              </div>
              <div class="row">
                <div class="at-select">
                  <div class="at-select__value"><span>请选择型号</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
              </div>
              <div class="row">
                <div class="at-select">
                  <div class="at-select__value"><span>请选择出厂年份</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
                <div class="at-select">
                  <div class="at-select__value"><span>请选择公里数</span>
                    <div class="val"></div>
                  </div>
                  <div class="at-select__options is-empty">暂无数据</div>
                </div>
              </div>
              <div class="row">
                <div class="at-input at-input--middle"><span class="at-input__placeholder">请输入手机号</span><input class="at-input__input"
                         value
                         placeholder
                         name="mobileValue"
                         maxlength="11"></div>
              </div>
              <div class="row">
                <div class="at-input at-input--middle"><span class="at-input__placeholder">请输入图形验证码</span><input class="at-input__input"
                         value
                         placeholder
                         name="imgCodeValue">
                  <div class="at-input__extra"><img class="img-code"
                         src="../../assets/images/random.png"></div>
                </div>
              </div>
              <div class="row">
                <div class="at-input at-input--middle"><span class="at-input__placeholder">请输入短信验证码</span><input class="at-input__input"
                         value
                         placeholder
                         name="smsCodeValue">
                  <div class="at-input__extra"><button class="get-sms-code">获取验证码</button></div>
                </div>
              </div>
              <div class="row total">
                <p>预计收益<span><strong>0</strong>元/天</span></p><small>在未获知车辆详细配置前，预计收益仅供参考</small>
              </div>
              <div class="row submit"><button class="at-button at-button--green at-button--large">提交</button></div>
            </div>
          </div>
        </div>
      </div>
      <div class="process-steps">
        <div class="com-panel-car-owner car-owner-steps">
          <h2 class="steps-header">操作流程</h2>
          <div class="steps">
            <div class="step s1"><i>1</i>
              <p>上传资料<br>车主身份证、<br>行驶证、<br>交强险保单</p>
            </div>
            <div class="step s2"><i>2</i>
              <p>设置租金价格、<br>可租时间</p>
            </div>
            <div class="step s3"><i>3</i>
              <p>足不出户，<br>即可接单</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'becomeTheOwner'
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
</style>
